<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="../lib/jquery-1.10.2.min.js"></script>
    <script src="../dist/tinyselect.js"></script>
    <link rel="stylesheet" type="text/css" href="../dist/tinyselect.css" />
    <link rel="stylesheet" type="text/css" href="misc/css/example.css" />
    <link rel="stylesheet" type="text/css" href="../lib/codemirror/codemirror.css" />
    <script src="../lib/codemirror/codemirror.js"></script>
    <script src="../lib/codemirror/mode/javascript/javascript.js"></script>
    <script src="../lib/codemirror/mode/css/css.js"></script>
    <link rel="stylesheet" type="text/css" href="misc/css/astable.css" />
    <script src="misc/js/source.js"></script>
</head>

<body>
    <var type="less" src="misc/less/astable.less"></var>
    <div class="tinyselectcontext-container">
        <div id="tinyselectcontext"></div>
    </div>
    <script>
        $.getJSON('misc/data/data.json').then(function(data) {
            tinyselect('#tinyselectcontext', {
                css: 'astable',
                item: {
                    data: data,
                    visible: 5,
                    render: function(data, index) {
                        // 这里创建一点随机数来填充表格，在项目中可以显示数据的其它字段
                        $(this).find('.tinyselect-item-before').text(index)
                            .css('textAlign', 'center')
                            .after('<div>' + getRandomNumber() + '</div>')
                            .after('<div>' + getRandomNumber() + '</div>')
                            .after('<div>' + getRandomNumber() + '</div>');

                        return data.text;
                    }
                }
            }).on('ready', function() {
                var box = this.dom.find('.tinyselect-box:first');

                var wrapper = $('<div class="box-wrapper">').height(box.height());

                box.height('auto').wrap(wrapper);
            });
        });

        function getRandomNumber() {
            return Math.round(Math.random() * 1000);
        }
    </script>
</body>

</html>